<script setup>
import { useCancelFollowMutation, useFollowMutation } from '@/composables/useUserInfoQuery'
import { queryClient } from '@/main'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

import { useGlobalStore } from '@/stores/globalStore'

const globalStore = useGlobalStore()


const props = defineProps({
  id: {
    type: Number,
  },
  isFollow: {
    type: Boolean,
  },
})


const hasFollow = ref(props.isFollow)

const route = useRoute()
const routeUid = ref(route.params.uid)


const { mutate } = useFollowMutation({
  onSuccess: () => {
    hasFollow.value = true
    globalStore.setRefreshFollower(!globalStore.refreshFollower)
  }
})

const { mutate: cancelFollowMutation } = useCancelFollowMutation({
  onSuccess: () => {
    hasFollow.value = false
    globalStore.setRefreshFollower(!globalStore.refreshFollower)
  }
})
const isHovered = ref(false)

const buttonClasses = computed(() => ({
  'px-3 py-1 rounded text-sm': true, // 基础类
  'bg-[--fill-2]': hasFollow.value,
  'text-[--text-1]': hasFollow.value,
  'text-[#e03c39] hover:bg-[#f5e4e4]': hasFollow.value && isHovered.value,
  'hover:bg-[--fill-3]': hasFollow.value && !isHovered.value,
  'bg-[#2e5592] text-[--text-0] hover:bg-[#16437C]': !hasFollow.value,
  // 'bg-[--fill-b] text-[--text-0] hover:bg-[--fill-b-1]': !hasFollow.value,
}))

const handleFollow = () => {
  mutate(props.id)
}

const handleCancelFollow = () => {
  cancelFollowMutation(props.id)
}


// 添加 hover 状态的响应式变量
</script>

<template>
  <button
    @click="hasFollow ? handleCancelFollow() : handleFollow()"
    :class="buttonClasses"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false">
    {{ hasFollow ? (isHovered ? '取消关注' : '已关注') : '关注' }}
  </button>
</template>
